<template>
  <div class="mod-config">
    <div
      v-loading="loadingPage"
      class="search-form search_form"
    >
      <el-form
        :model="searchForm"
        size="mini"
        label-position="right"
        class="demo-form-inline"
        label-width="110px"
      >
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="申诉部门：">
              <el-select
                v-model="searchForm.deptId"
                placeholder="请选择" filterable clearable
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="指标名称：">
              <el-input
                v-model="searchForm.keywords"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            style="text-align:center;"
          >
            <el-button
              size="mini"
              type="primary"
              @click="searchBtn"
            >查询
            </el-button>
            <el-button
              size="mini"
              @click="emptyClick"
            >清空
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-col :span="4" style="text-align:left; margin-bottom: 10px;">
        <el-button
          v-hasPermi="['/permission/depapproval']"
          size="mini"
          type="primary"
          @click="manySubnit">一键审批
        </el-button>
      </el-col>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      :row-key="bindRowKeys"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        reserve-selection="reserve-selection"
        :selectable="selectable"
        width="50"
      />
      <el-table-column
        prop="deptName"
        header-align="center"
        align="center"
        label="考核部门名称"
      />
      <el-table-column
        prop="indicatorTaskName"
        header-align="center"
        align="center"
        label="指标名称/任务内容"
      />
      <el-table-column
        prop="bdeptName"
        header-align="center"
        align="center"
        label="被考核部门名称"
      />
      <el-table-column
        prop="totalScore"
        header-align="center"
        align="center"
        label="得分"
        width="140"
      />
      <el-table-column
        prop="appealUser"
        header-align="center"
        align="center"
        label="申诉人"
        width="120"
      />
      <el-table-column
        prop="appealStatus"
        header-align="center"
        align="center"
        label="申诉状态"
        width="120"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.appealStatus === 0"
            style="color: #999999 ;font-weight:bold"
          >未审批</span>
          <span
            v-if="scope.row.appealStatus === 1"
            style="color: #13ce66 ;font-weight:bold"
          >同意</span>
          <span
            v-if="scope.row.appealStatus === 2"
            style="color: #ff4949 ;font-weight:bold"
          >驳回</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="description"
        header-align="center"
        align="center"
        label="备注"
      />
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间"
        width="160"
      >
        <template slot-scope="scope">
          {{ new Date(scope.row.createTime).toLocaleDateString().replaceAll('/', '-') }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['/permission/approval']"
            type="text"
            size="small"
            v-if="scope.row.appealStatus === 0"
            @click="sensu(scope.row.id)"
          >审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="progress_lok_page">
      <page
        :hidden="tableData && tableData.length === 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
      />
    </div>
    <el-dialog
      :title="'审核'"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        ref="senheForm"
        :model="senheForm"
        :rules="senheRule"
        style="width: 96%;"
        label-width="80px"
        @keyup.enter.native="senheFormSubmit()">
        <el-row :gutter="24" style="margin-bottom: 15px;">
          <el-col :span="12">
            <el-form-item
              label="审核人">
              <el-input v-model="senheForm.auditUsername" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="审核结果"
              prop="auditResult">
              <el-select
                v-model="senheForm.auditResult"
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item
              label="审核意见"
              prop="auditOpinion"
            >
              <el-input
                v-model="senheForm.auditOpinion"
                type="textarea"
                placeholder="请输入审核意见"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          @click="senheFormSubmit()"
        >提交</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>

  import axios from 'axios'
  import { AesDecrypt } from '../../utils/AesDecrypt'
  import { Encrypt } from '@/utils/cryptoAES'

  export default {
    data() {
      return {
        list: [],
        deptList: [],
        options: [{
          value: 2,
          label: '驳回'
        }, {
          value: 1,
          label: '同意'
        }],
        visible: false,
        tableData: [],
        loadingPage: true,
        loading: true,
        currentPage: 0,
        page: 1,
        pageSize: 10,
        total: 0,
        checkedArr: [], // 要导出的数据数组
        searchForm: {
          keywords: '', // 搜索条件指标名称
          deptId: ''
        },
        senheForm: {
          auditUserId: '', // 审核人id
          auditUsername: '', // 审核人
          auditResult: null, // 审核结果
          auditOpinion: ''
        },
        senheRule: {
          auditResult: [
            { required: true, message: '审核结果不能为空', trigger: 'blur' }
          ],
          auditOpinion: [
            { required: true, message: '审核意见不能为空', trigger: 'blur' }
          ]
        }
      }
    },

    created() {
      if (this.$route.query.deptId) {
        var deptId = this.$route.query.deptId
        this.searchForm.deptId = deptId
      }
      this.getList ()
      this.getDeptList ()
      // this.getUser ()
    },

    methods: {
      // 获取列表
      getList() {
        var uu = {
          page: this.page,
          pageSize: this.pageSize,
          keywords: this.searchForm.keywords,
          deptId: this.searchForm.deptId
        }
        var jsonString = JSON.stringify (uu)
        var yy = Encrypt (jsonString)
        var encodedString = encodeURIComponent (yy)
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/depappealform/list',
          data: encodedString
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.tableData = data.content
            this.total = data.total
            this.loading = false
            this.loadingPage = false
          } else {
            this.loading = false
            this.loadingPage = false
            this.$message.error (data.msg)
            this.tableData = []
          }
        }).catch (error => {
          this.$message.error ('服务器访问异常，请从新登录')
        })
      },
      /** 点击分页触发的事件 */
      handlePageChange(pageInfo) {
        this.loading = true
        this.page = pageInfo.page
        this.pageSize = pageInfo.limit
        this.getList ()
      },
      // 清空
      emptyClick() {
        this.searchForm.keywords = ''
        this.searchForm.deptId = ''
      },

      bindRowKeys(row) {
        return row.id
      },
      searchBtn() {
        this.loading = true
        this.page = 1
        this.getList ()
      },
      // 多选
      handleSelectionChange(value) {
        this.checkedArr = value
        // element表格多选第一页选中往后翻一页全选，再回到第一页会再次选中第一页的数据，所以需要手动去重
        const hash = {}
        this.checkedArr = this.checkedArr.reduce ((preVal, curVal) => {
          hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push (curVal)
          return preVal
        }, [])
      },
      // 单条申诉
      sensu(id) {
        this.senheForm.auditUserId = null, // 审核人id
          this.senheForm.auditUsername = null, // 审核人
          this.senheForm.auditResult = null, // 审核结果
          this.senheForm.auditOpinion = null

        this.list = [], this.visible = true
        this.list.push (id)
        this.getUser ()

      },
      // 批量申诉
      manySubnit() {
        this.senheForm.auditUserId = null, // 审核人id
          this.senheForm.auditUsername = null, // 审核人
          this.senheForm.auditResult = null, // 审核结果
          this.senheForm.auditOpinion = null

        this.list = [],
          this.visible = true
        this.searchForm.ids = []
        if (this.checkedArr.length != 0) {
          this.checkedArr.forEach (item => {
            this.searchForm.ids.push (item.id)
          })
        } else {
          this.searchForm.ids = []
        }
        this.list = this.searchForm.ids
        this.getUser ()
      },

      // 申诉
      senheFormSubmit() {
        if (this.list.length <= 0) {
          this.visible = false
          return this.$message.warning ('请先选中！')
        }
        this.$refs['senheForm'].validate ((valid) => {
          if (valid) {

            var uu = {
              appealIds: this.list,
              auditUserId: this.senheForm.auditUserId, // 审核人id
              auditUsername: this.senheForm.auditUsername, // 审核人
              auditResult: this.senheForm.auditResult, // 审核结果
              auditOpinion: this.senheForm.auditOpinion// 审核意见
            }
            var jsonString = JSON.stringify (uu)
            var yy = Encrypt (jsonString)
            var encodedString = encodeURIComponent (yy)
            axios ({
              method: 'post',
              url: '/hr-xc-human-resources-perform-manage/generator/depappealform/batchAudit',
              data: encodedString
            }).then (({ data }) => {
              if (data && data.code === '00000') {
                this.visible = false
                if (data.success) {
                  this.$message.success ('审核成功')
                } else {
                  this.$message.error ('审核失败')
                }
              } else {
                this.loading = false
                this.loadingPage = false
                this.$message.error (data.msg)
              }
              this.getList ()
            }).catch (error => {
              this.$message.error ('服务器访问异常，请从新登录')
            })
          }
        })
      },
      getDeptList() {
        this.deptList = []
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/torgdept/queryAllDeptIdAndName'
        }).then (({ data }) => {
            if (data && data.code === '00000') {
              var data = AesDecrypt (data.result)
              data.forEach (v => {
                this.deptList.push (v)
              })
            }
          }
        ).catch (error => {
          this.$message.error ('服务器访问异常，请从新登录')
        })
      },
      getUser() {
        let that = this
        axios ({
          url: '/hr-xc-human-resources-perform-manage/authUser/getCurrentUser',
          method: 'get'
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            that.senheForm.auditUserId = data.userId
            that.senheForm.auditUsername = data.userName
          } else {
            that.$message.error ('获得当前登录人失败！')
          }
        }).catch (error => {
          this.$message.error ('服务器访问异常，请从新登录')
        })
      },
      selectable(row, index) {
        if (row.appealStatus === 0) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

